<template>
  <div id="app">
    <!-- 3.使用自定义组件,当做HTML元素-->
    <Car></Car>
    <person></person>
    <Item></Item>
    <!-- 使用路由规则-->
    <router-link to="./components/t1">t1</router-link>
    <router-link to="./components/t2">t2</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  //1.导入指定位置的自定组件car.vue
  import Car from './components/Car.vue';
  import person from './components/person.vue';
  import Item from './components/Item.vue';
  //2,使用components属性,使用自定义组件
export default {
  name: 'App',
  components:{
    Car, //注册刚刚导入的自定义组件
    person,
    Item
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>